<!-- 
  input组件                 zls-2023/07/27
    所有属性、事件、方法、插槽，请参考   https://vant-contrib.gitee.io/vant/#/zh-CN/field
  
  Demo
      <Form ref="formRef">
        <z-input
          v-model="form.username"
          label="用户名"
          required
          :rules="[{ required: true, message: '请输入用户名' }, { message: loginName.err, pattern: loginName.reg }]"
        >
        </z-input>
        <z-input
          v-model="form.password"
          label="密码"
          :type="showText ? 'text' : 'password'"
          required
          :rules="[{ required: true, message: '请输入密码' }, { message: loginPwd.err, pattern: loginPwd.reg }]"
        >
          <template #right-icon> <z-svg :name="showText ? 'yanjing' : 'yanjing1'" @click="showText = !showText"></z-svg> </template>
        </z-input>
        <z-input v-model="form.height" label="身高" :maxlength="3" :rules="[{ message: intNum.err, pattern: form.height && intNum.reg }]">
          <template #extra> cm </template>
        </z-input>
        <z-input v-model="form.textarea" label="描述" type="textarea" label-align="top" :maxlength="100" :rules="[{ message: textName.err, pattern: form.textarea && textName.reg }]"> </z-input>
      </Form>

      const form = reactive({
        username: 'zls',
        password: 'Qwer1234@',
        height: '173',
        textarea: '',
      })
 -->
<template>
  <Field ref="zInputRef" class="z-input" v-bind="{ ...$attrs, ...attrsDefault }" @update:model-value="input">
    <template v-for="(value, name) in $slots" :key="name" #[name]="slotsData">
      <slot :name="name" v-bind="slotsData || {}"></slot>
    </template>
  </Field>
</template>

<script>
export default { name: 'z-input' }
</script>
<script setup>
import { onMounted, ref } from 'vue'
import { Field } from 'vant'
import { getType } from '@/utils/index'
const emit = defineEmits(['update:modelValue'])
const zInputRef = ref(null)
let methodsObj = {}

const attrsDefault = {
  placeholder: '请输入',
  clearable: true,
  maxlength: '20',
  autocomplete: 'none'
}

onMounted(() => {
  getMethods()
})

// 实时更新数据
function input(val) {
  emit('update:modelValue', val)
}

// 遍历 Field 输入框组件中所有绑定在ref上的方法，导出去，便于父组件直接调用（控制台有警告无所谓）
function getMethods() {
  Object.entries(zInputRef.value).forEach(([key, value]) => {
    if (getType(value) === 'function') {
      methodsObj[key] = value
    }
  })
}

defineExpose(methodsObj)
</script>
